import { withI18n, Trans } from '@lingui/react'
//import { Form } from 'antd'
import React, { Fragment, PureComponent } from 'react'
import PropTypes from 'prop-types'
import { DescriptionList } from 'ant-design-pro'
import { Page } from 'components'
import { Spin, Empty, Radio, Typography, DatePicker, Button, Icon } from 'antd'
import ReactEcharts from 'echarts-for-react'
import echarts from 'echarts'
import 'echarts-gl'
import styles from '../index.less'
import moment from 'moment'
const { MonthPicker, RangePicker, WeekPicker } = DatePicker
const { Paragraph } = Typography
const { Description } = DescriptionList

const datetoday = moment().format('YYYY-MM-DD')

@withI18n()
class Resolved extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      whichone: 'v',
    }
  }

  getoption(data) {
    const { i18n, hisstartdate, hisenddate } = this.props
    const { whichone } = this.state
    const pref = {
      v: i18n.t`Voltage`,
      e: i18n.t`Electric Current`,
      p: i18n.t`Power`,
      tp: i18n.t`Plate Temperature`,
      pv_v: i18n.t`Solar charging Voltage`,
      led_v: i18n.t`Lamp Voltage`,
    }
    const preffix = pref[whichone]
    let min, max
    if (data.max != 0 && data.min != 0) {
      min = data.min - 60 * 60 * 24 * 1000
      max = data.max
    } else {
      min = moment(hisstartdate).valueOf()
      max = moment(hisenddate).valueOf()
    }
    return {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
        },
        formatter: (params, ticket, callback) => {
          const { value } = params[0]
          return `${preffix + i18n.t`Max`} : ${value[1]}
          <br/>${preffix + i18n.t`Min`} : ${params[1].value[1]}
          <br/>${i18n.t`Time`} : ${moment(value[0]).format('YYYY-MM-DD')}`
        },
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      // dataZoom: {
      //   show: true,
      //   realtime: true,
      //   start: 30,
      //   end: 70,
      //   xAxisIndex: [0],
      // },
      xAxis: {
        type: 'time',
        boundaryGap: false,
        min,
        max,
        interval: 60 * 60 * 24 * 1000,
        axisLabel: {
          formatter: value => {
            return moment(value).format('YYYY-MM-DD')
          },
        },
      },
      yAxis: {
        name: preffix,
        type: 'value',
      },
      series: [
        {
          name: preffix + 'Max',
          type: 'line',
          data: data[whichone + 'max'],
          markLine: {
            data: [
              { type: 'average', name: '平均值' },
              [
                {
                  symbol: 'none',
                  x: '90%',
                  yAxis: 'max',
                },
                {
                  symbol: 'circle',
                  label: {
                    normal: {
                      position: 'start',
                      formatter: '最大值',
                    },
                  },
                  type: 'max',
                  name: '最高点',
                },
              ],
            ],
          },
        },
        {
          name: preffix + 'Min',
          type: 'line',
          data: data[whichone + 'min'],
        },
      ],
    }
  }

  ismultidataaccess = () => {
    const { rslaterdata } = this.props
    const { whichone } = this.state
    const targdatamax = rslaterdata && rslaterdata[whichone + 'max']
    const targdatamin = rslaterdata && rslaterdata[whichone + 'min']
    return (
      (targdatamax && targdatamax.length > 0) ||
      (targdatamin && targdatamin.length > 0)
    )
  }
  componentWillReceiveProps(nextprops) {
    const { rslaterdata, hisstartdate, hisenddate } = nextprops
    this.setState({ isoneday: hisstartdate == hisenddate })
    if (this.ismultidataaccess() && this.echarts_react) {
      // let echarts_instance = this.echarts_react.getEchartsInstance()
      // echarts_instance.setOption({
      //   ...this.getoption(
      //     laterdata[this.state.whichone],
      //     hisstartdate,
      //     hisenddate
      //   ),
      // })
    }
  }

  render() {
    const {
      i18n,
      data,
      deviceid,
      Imei,
      resstartdate,
      resenddate,
      getresolveddata,
      updateResolvedDate,
      rslaterdata,
      loading,
    } = this.props
    const { whichone, isoneday } = this.state
    // console.log(JSON.stringify(laterdata))
    return (
      <Page inner>
        <DescriptionList
          size="large"
          title={
            <b>
              <Trans>Historically reported data of equipment</Trans>
            </b>
          }
        >
          <Spin spinning={loading}>
            <Radio.Group
              value={whichone}
              onChange={e => {
                this.setState({ whichone: e.target.value })
              }}
              style={{
                marginLeft: '10px',
                marginRight: '10px',
                marginBottom: '10px',
              }}
            >
              <RangePicker
                value={[
                  moment(resstartdate, 'YYYY-MM-DD'),
                  moment(resenddate, 'YYYY-MM-DD'),
                ]}
                placeholder={i18n.t`Select Time`}
                format={'YYYY-MM-DD'}
                onChange={dates => {
                  getresolveddata(
                    dates[0] ? dates[0].format('YYYY-MM-DD') : undefined,
                    dates[1] ? dates[1].format('YYYY-MM-DD') : undefined
                  )
                }}
                ranges={{
                  今天: [moment(), moment()],
                  本月: [moment().startOf('month'), moment().endOf('month')],
                }}
              />
              <Radio.Button value="v">
                <Trans>Voltage</Trans>
              </Radio.Button>
              <Radio.Button value="e">
                <Trans>Electric Current</Trans>
              </Radio.Button>
              <Radio.Button value="p">
                <Trans>Power</Trans>
              </Radio.Button>
              <Radio.Button value="tp">
                <Trans>Plate Temperature</Trans>
              </Radio.Button>
              <Radio.Button value="pv_v">
                <Trans>Solar charging Voltage</Trans>
              </Radio.Button>
              <Radio.Button value="led_v">
                <Trans>Lamp Voltage</Trans>
              </Radio.Button>
            </Radio.Group>
            <div>
              {this.ismultidataaccess() ? (
                <div>
                  <ReactEcharts
                    option={this.getoption(rslaterdata)}
                    style={{ minHeight: '700px', width: '100%' }}
                  />
                </div>
              ) : (
                <Empty style={{ marginTop: '20px' }} />
              )}
            </div>
          </Spin>
        </DescriptionList>
      </Page>
    )
  }
}

Resolved.propTypes = {
  onAdd: PropTypes.func,
  //form: PropTypes.object,
  filter: PropTypes.object,
  onFilterChange: PropTypes.func,
}

export default Resolved
